<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#fff" size="50"></u-icon>
			<text>开关机设置</text>
		</view>
		<!-- 内容 -->
		<view class="section">
			<!-- 设备信息 -->
				<view class="collapse" v-for="(item,index) in itemList" :key="index">
				<view>
				<!-- <view class="coll-header">
				<view style="display: flex;">
				<view class="head-txt">设备列表</view>
				</view>
				<view class="sub-num"  @click="changeContent(item,index)">展开
				<u-icon  name="arrow-right" v-show="showUp" color="#999999" size="28"></u-icon>
				<u-icon name="arrow-down" v-show="!showUp"  color="#999999" size="28"></u-icon>
				</view>
				</view> -->
			 <!-- 展开 -->
			<view class="box">
				<view class="box-cont" v-if="item.open==true" v-for="(itemMsg,indexMsg) in item.body" :key="indexMsg">
				<view style="display: flex;">
					<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/baby.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
				<text style="font-size: 32rpx;margin-left: 10rpx;margin-top: 20rpx;">{{itemMsg.msg}}</text></view>
				<view style="margin-top: 20rpx;font-size: 32rpx;">在线
					<u-icon name="wifi" size="40" color="rgb(68,92,223)"></u-icon>
				</view>
				<view class="sub-num conList" v-show="showUpImg2" @click="changeImg2">
					<u-icon name="checkbox-mark" size="30" color="#fff"></u-icon>
				</view>
				<view class="conLists" v-show="!showUpImg2" @click="changeImg2"></view>
			                     </view>
				                </view>
				            </view>
			         </view>
			<!-- 远程开关 -->
			<view class="switch" style="height: 120rpx;">
				<view style="height: 30rpx;width: 8rpx;background-color: rgb(68,92,223);border-radius:50rpx;position:absolute;top:38%;left:8%;"></view>
				<text style="position: absolute;top: 33%;left: 12%;font-size: 32rpx;font-weight: bold;">远程开关</text>
				<!-- 按钮 -->
				<view class="switch-set">
					<view v-show="showUpImg" @click="changeImg" class="open">
						<view style="background-color: #fff;width: 50rpx;height: 50rpx;border-radius: 50%;"></view>
					</view>
					<view v-show="!showUpImg" @click="changeImg" class="shut">
						<view >
							<view style="background-color: #fff;width: 50rpx;height: 50rpx;border-radius: 50%;float: right;"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 定时 -->
			<view :style="{'height': shutdownSwitch ? '400rpx' : '100rpx'}" class="timing">
				<view style="height: 100rpx;">
					<view style="height: 30rpx;width: 8rpx;background-color: rgb(68,92,223);border-radius:50rpx;position:absolute;top:40rpx;left:40rpx;"></view>
					<text style="position: absolute;top: 35rpx;left: 70rpx;font-size: 32rpx;font-weight: bold;">定时关机</text>
					<!-- 按钮 -->
					<view class="timing-set">
						<view v-show="showUpImg1" @click="changeImg1" class="timing-open">
							<view style="background-color: #fff;width: 50rpx;height: 50rpx;border-radius: 50%;"></view>
					</view>
					<view v-show="!showUpImg1" @click="changeImg1" class="timing-shut">
						<view >
							<view style="background-color: #fff;width: 50rpx;height: 50rpx;border-radius: 50%;float: right;"></view>
						</view>
					</view>
					</view>
				</view>
				
				<view v-show="shutdownSwitch">
					<view class="basics-join">
						<text style="font-weight: bold;">温度设置</text>
						<view class="pickr">
							<input style="float: left;margin-right: 5rpx;font-size: 22rpx;color:#898989;padding-left: 20rpx;" type="text" v-model="tempmin" placeholder="1" @input="handleTempminInput"/>
							<view class="line"></view>
							<text style="margin-right: 5rpx;font-size: 24rpx;color:rgb;position: absolute;top: 20%;right: 10%;">℃</text>
						</view>
						<view style="height: 1rpx;background-color: rgb(247,244,247);margin-top: 30rpx;"></view>
					</view>
				<view class="basics-join">
					<text style="font-weight: bold;">自动开关机设置</text>
					<view class="pickr">
						<input style="float: left;margin-right: 5rpx;font-size: 22rpx;color:#898989;padding-left: 20rpx;" type="text"  v-model="openmin"  placeholder="1"  @input="handleOpenminInput"/>
						<view class="line"></view>
						<text style="margin-right: 5rpx;font-size: 24rpx;color:rgb;position: absolute;top: 20%;right: 10%;">分钟</text>
					</view>
					<view style="height: 1rpx;background-color: rgb(247,244,247);margin-top: 30rpx;"></view>
				</view>
				</view>
			<view class="tips">
				<!-- <view>***</view> -->
				<text>当用户测量温度大于设置的温度，并且持续时间大于设置时间时，设备将自动关机停止运行。</text>
			</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUp:true,
				showUpImg:true,
				showUpImg1:true,
				showUpImg2:false,
				disabled:false,
				openmin:1,
				tempmin:34,
				 show: false,
				 shutdownSwitch: false,
				 itemList: [{
				     head: "考点名称1",
				     subnum: '12',
				     body: [{
				             msg: '大宝',
				             num: '3',
				         },
				         {
				             msg: '大宝',
				             num: '2',
				         },
						 {
						     msg: '大宝',
						     num: '2',
						 }
				     ],
				     open: false,
				     disabled: true,
				     imgUrl1: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/babyList.jpg',
				     imgUrl2: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/babyList.jpg',
					 
				 }],
				
			}
		},onLoad() {
			this.getDeviceInfo();
		},
		methods: {
			async getDeviceInfo(){
				let tpl_param = {code: "1111111"};
				uni.showLoading({title: '加载中',	mask: true	});
				let res = await this.$api.getDeviceInfo(tpl_param);
				if (res.code == 200) {
					var row = res.result;
					this.tempmin = row.colsetemp;
					this.openmin = row.colseminute;					
					this.showUpImg1 = row.openstatus;
					this.shutdownSwitch = row.openstatus;
				} else {
					uni.showToast({title: res.message || '获取最后一次数据失败'	});
				}
				uni.hideLoading();
			},
			async handleTempminInput(e){
				
				//console.log(e.target.value);
				let tpl_param = {
					colsetemp: e.target.value
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.updateColsetemp(tpl_param);
				if (res.code == 200) {
					this.tempmin = e.target.value;
				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();
				
			},
			async handleOpenminInput(e)	{				
				let tpl_param = {
					colseminute: e.target.value
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.updateColseminute(tpl_param);
				if (res.code == 200) {
					this.openmin = e.target.value;
				} else {
					uni.showToast({
						title: res.message || '获取最后一次数据失败'
					});
				}
				uni.hideLoading();
			},
			navigateBack(){
				uni.switchTab({
					url:'../my'
				})
			},
			change:function(){undefined
					this.showUp = !this.showUp
			},
			changeImg:function(){undefined
					this.showUpImg = !this.showUpImg
			},
			changeImg2:function(){undefined
					this.showUpImg2 = !this.showUpImg2
			},
			async changeImg1(){
				this.showUpImg1 = !this.showUpImg1
				this.shutdownSwitch = !this.shutdownSwitch
				
				let tpl_param = {status: this.showUpImg1};
				uni.showLoading({title: '加载中',mask: true});
				let res = await this.$api.updateCloseStatus(tpl_param);
				if (res.code == 200) {
				
				} else {
					uni.showToast({title: res.message || '获取最后一次数据失败'});
				}
				uni.hideLoading();
			},
			changeContent(item,index) {
			    this.itemList.forEach(i => {
			        if (i.open !== this.itemList[index].open) {
			            i.open = false;
			        }
			    })
			    item.open = !item.open
				this.showUp = !this.showUp
			},
		}
	}
</script>

<style scoped lang="scss">
	.tips{font-size: 24rpx;color: #999;margin-top:10rpx}
	.tips > view{text-align: center;}
	.tips image:first-child{}
	// 头部
	.navbar{padding-top: 90rpx;padding-bottom: 40rpx;width: 750rpx;color: #fff;background-color: rgb(68, 92, 223);}
	
	.navbar > text{font-size: 36rpx;padding-left: 220rpx;}
	
	.icon-left{margin-top: 20rpx;margin-left: 10rpx;}
	// 内容
	.section{background-color: rgb(245,245,245);padding: 50rpx;padding-bottom: 930rpx;}
	
	.section > view{
		// height: 120rpx;
		position: relative;
		border-radius: 20rpx;background-color: #fff;margin-bottom: 30rpx;
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
	}
	
	.collapse {
	     padding: 0 36rpx;
	 }
	 
	 .coll-header {
	     display: flex;
	     height: 140rpx;
	     align-items: center;
	     justify-content: space-between;
		 padding: 0rpx;
	 }
	 
	 .box {
	     overflow: hidden;
	     transition: all 0.3;
	     border-bottom: 1px solid #F9F9F9;
	 }
	 
	 .head-txt {
	     margin-left: 15rpx;
	     font-size: 32rpx;
	     font-weight: 700;
	 }
	 
	 .conList{
		  width: 40rpx;height: 40rpx;margin-top: 20rpx;background-color: rgb(68, 92, 223);
		  padding: 5rpx;
	 }
	 .conLists{width: 40rpx;height: 40rpx;margin-top: 20rpx;border: 1rpx solid rgb(68, 92, 223);}
	 .box-cont {
	     display: flex;
	     justify-content: space-between;
	     margin-bottom: 50rpx;
	 }
	 .box-cont:last-child{
	     margin-bottom:20rpx;
	 }
	
	// 远程开关
	.switch-set{position: absolute;right: 6%;top: 25%;}
	.open{height: 60rpx;border-radius: 50rpx;width: 100rpx;background-color: rgb(233,233,233);padding: 5rpx;}
	.shut{height: 60rpx;border-radius: 50rpx;width: 100rpx;background-color: rgb(83,109,214);padding: 5rpx;}
	
	
	
	// 定时
	.timing{margin-bottom: 250rpx;}
	.timing-set{position: absolute;right: 6%;top: 10%;}
	.timing-open{height: 60rpx;border-radius: 50rpx;width: 100rpx;background-color: rgb(233,233,233);padding: 5rpx;}
	.timing-shut{height: 60rpx;border-radius: 50rpx;width: 100rpx;background-color: rgb(83,109,214);padding: 5rpx;}
	
	// 基础设置
	.basics-set{position: relative;padding: 30rpx;}
	.basics{position: relative;height: 50rpx;}
	.basics-join{position: relative;height: 80rpx;margin-bottom: 0rpx;
				 font-size: 30rpx;padding: 50rpx;}
	.line{height: 1px;background-color: rgb(245,245,245);margin-top: 30rpx;}
	.pickr{height: 50rpx;border-radius: 50rpx;border: 1px solid rgb(183,183,183);width: 200rpx;float: right;padding: 6rpx;position: relative;color: #666;}
	.line{height: 50rpx;width:1rpx;background-color: rgb(183,183,183);display: inline-block;position: absolute;top: -70%;left: 55%;}
	input{width: 80rpx;}
</style>